<template>
    <el-container class="head-container">
        <!-- 头部 -->
        <el-header>
            <div>
                <span>电力巡检系统</span>
            </div>
            <el-button type="info" @click="logout">退出</el-button>
        </el-header>

        <!--主体-->
        <el-container>
            <el-aside class="navigation-menu" width="200px">
                <!--侧边导航-->
                <el-menu :unique-opened="true" :router="true">
                    <!--一级菜单-->
                    <el-submenu v-for="menu in menus" :key="menu.id" :index="'/' + menu.id">
                        <!--一级菜单模板-->
                        <template slot="title">
                            <i :class="iconsObj[menu.id]"></i>
                            <span>{{menu.menu}}</span>
                        </template>
                        <!--二级菜单-->
                        <el-menu-item v-for="sub in menu.sub" :key="sub.path" :index="sub.path">
                            <i class="el-icon-menu"></i>
                            <span>{{sub.subName}}</span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!--右边主体-->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Head",
        data() {
            return {
                menus: [],
                iconsObj: {
                    100: 'iconfont icon-gongzuopingtai',
                    200: 'iconfont icon-xitong',
                    300: 'iconfont icon-gantaguanli',
                    400: 'iconfont icon-xianluguanli',
                    500: 'iconfont icon-quexianguanli',
                    600: 'iconfont icon-xunchaguanli',
                    700: 'iconfont icon-ziliao',
                    800: 'iconfont icon-xinxitongji'
                }
            }
        },
        /*json相关*/
        mounted() {
            this.getList()
        },
        methods: {
            /*退出功能*/
            logout() {
            },

            /*json相关*/
            async getList() {
                const{data:res} = await this.axios.post('/getMenus')
                this.menus = res.result
            }
        }

    }
</script>

<style scoped lang="less">
    .head-container {
        height: 100%;
    }

    .el-header {
        background-color: gray;
        justify-content: space-between;
        display: flex;
        padding-left: 0;
        align-items: center;
        color: #fff;
        font-size: 20px;

        > div {
            display: flex;
            align-items: center;

            > span {
                margin-left: 10px;
            }
        }
    }

    .navigation-menu {
        background-color: #F1F3F4;
        >.el-menu {
            border-right: none;
            background-color: #F1F3F4;
        }
    }
    .iconfont{
        margin-right: 10px;
    }
</style>
